<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="true"
      :exportShow="false"
      icon="iconfont icon-huiyuanzhucedengluguanli"
      @handelClick="() => exportData()"
      @handelExport="() => exportUser()"
    />

    <div class="app-container" ref="block">

      <div class="containerMain" >
        <div style="background-color: white; margin-bottom: 10px;margin-top: 10px;">
        <el-row type="flex" justify="space-around">
          <el-col :span="4">
            <div style="display: flex; align-items: center">
              <img
                class="logo-icon"
                src="../../../assets/user_info.png"
                alt=""
              />
              <div class="totaldiv">
                <div class="totalname">登录坐席数</div>
                <div class="totalnum">{{ board.agentLoginNum }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display: flex; align-items: center">
              <img
                class="logo-icon"
                src="../../../assets/user_info.png"
                alt=""
              />
              <div class="totaldiv">
                <div class="totalname">空闲坐席</div>
                <div class="totalnum">{{ board.agentReadyNum }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display: flex; align-items: center">
              <img
                class="logo-icon"
                src="../../../assets/user_info.png"
                alt=""
              />
              <div class="totaldiv">
                <div class="totalname">通话坐席</div>
                <div class="totalnum">{{ board.callingAgentNum }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4" type="flex">
            <div style="display: flex; align-items: center">
              <img
                class="logo-icon"
                src="../../../assets/user_info.png"
                alt=""
              />
              <div class="totaldiv">
                <div class="totalname">今日累计服务数</div>
                <div class="totalnum">{{ board.serviceCustomerNum }}</div>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
      <div style="width:100%;height:6px;background-color: #e8ecef"></div>
        <div class="search-item">
          <div class="item-list">
            <div class="item-con">
              <span>坐席编号</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.agentId"
                placeholder="请输入坐席编号"
              ></el-input>
            </div>
            <div class="item-con">
              <span>坐席姓名</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.agentName"
                placeholder="请输入坐席姓名"
              ></el-input>
            </div>
            <!-- <div class="item-con">
              <span>坐席视讯号</span>
              <el-input
                style="width: 200px"
                size="mini"
                v-model="searchform.agentVideoNum"
                placeholder="请输入视讯号"
              ></el-input>
            </div> -->
            <div class="item-con">
              <span>当前状态</span>
              <el-select
                size="mini"
                clearable
                v-model="searchform.status"
                placeholder="全部"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="离线" value="2"></el-option>
                <el-option label="忙" value="3"></el-option>
                <el-option label="闲" value="4"></el-option>
                <el-option label="锁定" value="5"></el-option>
                <el-option label="通话中" value="6"></el-option>
                <el-option label="事后整理" value="7"></el-option>
              </el-select>
            </div>

            <div class="item-con">
              <span>所属技能组</span>
              <el-select
                size="mini"
                clearable
                v-model="searchform.skillId"
                placeholder="全部"
              >
                <el-option
                  v-for="(item, index) in skillGroupList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>

          </div>
          <div class="item-btn">
            <el-button
              class="kyeup_search_btn"
              type="primary"
              size="mini"
              @click="() => fetchData()"
              >搜索</el-button
            >
            <el-button type="default" size="mini" @click="() => reset()"
              >重置</el-button
            >
          </div>
        </div>
        <div class="container">
          <div class="div-table">
            <el-table
              :header-cell-style="headerStyle"
              :data="list"
              element-loading-text="Loading"
              fit
               :height="tableHeight"
              size="mini"
              highlight-current-row
            >
              <el-table-column label="坐席编号">
                <template slot-scope="scope">{{ scope.row.agentId }}</template>
              </el-table-column>
              <el-table-column label="坐席姓名">
                <template slot-scope="scope">{{
                  scope.row.agentName
                }}</template>
              </el-table-column>
              <!-- <el-table-column label="视讯号">
                <template slot-scope="scope">{{
                  scope.row.agentVideoNum
                }}</template>
              </el-table-column> -->
              <el-table-column label="当前状态">
                <template slot-scope="scope">{{
                  scope.row.statusStr
                }}</template>
              </el-table-column>
              <el-table-column label="当前状态时长">
                <template slot-scope="scope">{{
                  scope.row.statusDuration
                }}</template>
              </el-table-column>
              <el-table-column label="最近登录时间">
                <template slot-scope="scope">{{
                  scope.row.recentlyLoginTime
                }}</template>
              </el-table-column>
              <el-table-column label="最近视频时长">
                <template slot-scope="scope">{{
                  scope.row.recentlyVideoDurationStr
                }}</template>
              </el-table-column>
              <el-table-column label="最近视频开始时间">
                <template slot-scope="scope">{{
                  scope.row.recentlyVideoBeginTime
                }}</template>
              </el-table-column>
              <el-table-column label="累计置闲时长">
                <template slot-scope="scope">{{
                  scope.row.accumulateReadyDurationStr
                }}</template>
              </el-table-column>
              <el-table-column label="首次登录时间">
                <template slot-scope="scope">{{
                  scope.row.firstLoginTime
                }}</template>
              </el-table-column>
              <el-table-column label="今日累计通话数">
                <template slot-scope="scope">{{
                  scope.row.accumulateCallTimes
                }}</template>
              </el-table-column>
              <el-table-column label="今日累计通话时长">
                <template slot-scope="scope">{{
                  scope.row.accumulateCallDurationStr
                }}</template>
              </el-table-column>
              <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="() => reloadagent(scope.row.agentId)"
                  ><span style="color: red">重置坐席状态</span></el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTitle from "@/components/Headertitle/index";
import {  fetchAllSkill} from "@/api/systemapi/skill";
import {
  fetchMonitor,
  fetchMonitorSum,
  fetchMonitorExport,
  reloadagent //重置坐席状态
} from "@/api/systemapi/agent";

export default {
  components: {
    HeaderTitle,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      titleList: [{ title: "坐席监控" }],
      list: [],
      listLoading: true,
      skillGroupList: [],
      tableHeight: "300", //表格默认高度
      searchform: {
        agentId: "",
        agentVideoNum: "",
        agentName: "",
        skillId: "",
        loginStatus: "",
        status: "",
      },
      board: {
        agentLoginNum: 0,
        agentReadyNum: 0,
        callingAgentNum: 0,
        serviceCustomerNum: 0,
      },
      timer: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 270;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 270;
        })();
      };
    });
    this.fetchData();
    this.fetchSkillList();
    this.timerFn();
  },
  destroyed(){
     clearInterval(this.timer)
  },
  methods: {
    timerFn() {
      this.timer = setInterval( ()=> {
        this.fetchData();
      }, 5000)
    }, 
    exportData() {
      fetchMonitorExport({ ...this.searchform }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },

    // 重置搜索，刷新列表
    reset() {
      (this.searchform = {
        agentId: "",
        agentVideoNum: "",
        agentName: "",
        skillId: "",
        loginStatus: "",
        status: "",
      })
    },
    fetchSkillList() {
      fetchAllSkill({}).then((response) => {
        if (response.code == 0) {
          this.skillGroupList = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    fetchData() {
      fetchMonitor({ ...this.searchform }).then((response) => {
        if (response.code == 0) {
          this.list = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
      this.fetchSumData();
    },
    //重置坐席状态
    reloadagent(agentId){
      this.$confirm("是否确定重置坐席状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        reloadagent({agentId:agentId}).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: "重置成功",
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    fetchSumData() {
      fetchMonitorSum({ ...this.searchform }).then((response) => {
        if (response.code == 0) {
          this.board = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.totaldiv {
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  // text-align: center;
  border: 1px solid #000;
  // width: 150px;
  border: none;

  .totalname {
    padding: 5px 0;
    text-align: center;
    // background: #28868c;
    color: #000000;
  }

  .totalnum {
    text-align: center;
    padding: 5px 0;
    font-weight: 700;
  }
}

.containerMain {
  .search-item {
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      margin-top: 20px;
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .item-btn {
    margin-top: 20px;
    flex: 0 0 140px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
